<template>
  <div class="noFinished-container">
    <!-- 查看计分表弹出层 -->
    <van-popup
      v-model="StatisticalTableShow"
      position="right"
      :overlay="false"
      closeable
      close-icon-position="top-left"
      :style="{width:'100%',height:'100%'}">

        <StatisticalTable></StatisticalTable>
    </van-popup>

    <!-- 点击开始技术统计时，比赛设置 -->
    <van-popup
      v-model="StatisticsShow"
      position="right"
      :overlay="false"
      closeable
      close-icon-position="top-left"
      :style="{width:'100%',height:'100%'}">
        <!-- 计算统计的工作区域 -->
        <!-- <h1 style="margin: 20vw auto">这是计算统计的工作区域</h1> -->
        <settings></settings>
    </van-popup>
    <div v-for="(item, index) in this.CreateLeague[this.logoindex].CompetitionInfo" :key="index">
      <div class="time">
        <p>{{ item.time }}</p>
      </div>
      <div class="content">
        <!-- 顶部 -->
        <div class="content-top">
          <div class="top-left">
            <p>{{ item.state }}</p>
          </div>

        </div>
        <!-- 中间 -->
        <div class="content-center">
          <div class="center-left">
            <div class="left-top">
              <van-image
                round
                width="10vw"
                height="10vw"
                :src="require('@/images/serve/basketball/basketball.jpg')"
              />
              <p>{{ item.text1 }}</p>
            </div>
            <div class="left-btm">
              <van-image
                round
                width="10vw"
                height="10vw"
                :src="require('@/images/serve/basketball/basketball.jpg')"
              />
              <p>{{ item.text2 }}</p>

            </div>
          </div>
          <div class="center-right">
            <div class="right-top">
              <p>{{ item.time1 }}</p>
            </div>
            <div class="right-btm">
              <p>开始</p>
            </div>
          </div>
        </div>
        <!-- 旁边 -->
        <div class="content-aside">
          <van-row>
            <van-col span="12" class="aside1" @click="gotolink({ data:index },$event)">
              <van-icon name="records" size="4vw"/>
              技术统计
            </van-col>
            <van-col span="12" class="aside1">
              <van-icon name="video-o" size="4vw"/>

              视频直播
            </van-col>
          </van-row>

        </div>
        <!-- 底部 -->
        <div class="content-btm">
          <div class="btm-right" @click="stsshow">
            <p>查看积分表</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { mapState } from 'vuex'
import settings from '@/views/settings/settings.vue'
import StatisticalTable from '@/components/StatisticalTable/StatisticalTable.vue'

export default {
  name: 'e_finished',
  data () {
    return {
      StatisticalTableShow: false,
      StatisticsShow: false
    }
  },
  methods: {
    gotolink(data) {
      // this.$router.push('/Statistics')
      // console.log(this.logoindex)
      console.log('选中的联赛名称', this.CreateLeague[this.logoindex].CompetitionInfo[data.data])
      this.$store.state.creatDataId = data.data
      // console.log(this.$store.state.creatDataId)

      this.StatisticsShow = !this.StatisticsShow
    },
    stsshow() {
      console.log('logoflag', this.CreateLeague[this.logoindex].data[0].logoflag)

      this.StatisticalTableShow = !this.StatisticalTableShow
    }

  },
  computed: {
    ...mapState(['CreateLeague', 'logoindex', 'creatDataId', 'allList'])
  },
  components: {
    settings,
    StatisticalTable
  }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.noFinished-container{
  background-color: rgb(255, 255, 255);
  width: 100%;
}
.time{
  background-color: rgb(240, 240, 240);
  font-size: 2vw;
  padding: 2vw 0 2vw 3vw;
}
.content{
  /* background-color: blueviolet; */
  width: 94%;
  margin: 0 auto;
}
.content-top{
  height: 10vw;
  line-height: 10vw;
  /* background-color: rgb(158, 158, 158); */
  font-size: 3vw;
  color: rgb(0, 0, 0);
}
.content-center{
  /* background-color: antiquewhite; */
  height: 25vw;
}
.center-left,.center-right{
  float: left;
  box-sizing: border-box;
  /* border: 2px saddlebrown solid; */
  height: 25vw;
}
.center-left{
  width: 70%;
}
.center-right{
  width: 20vw;
  border-left: 4px solid gray;
  line-height: 11.5vw;
  text-align: center;
  margin-left:5vw ;
  font-size: 3vw;
}
.left-top{
  position: relative;
}
.left-top p{
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%,-50%);
}
.right-top{
  line-height: 20vw;
  height: 10vw;
}
::v-deep.van-image{
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translate(-50%,-50%);
}
.left-btm p{
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%,-50%);
}
.left-btm{
  position: relative;
}
.center-left div{

  height: 50%;
  /* background-color: rgb(139, 139, 139); */
  line-height: 11.5vw;
}
.content-aside{
  height: 10vw;
  /* background-color: aquamarine; */
  text-align: center;
  line-height: 10vw;
}
.aside1{
  position: relative;
}
.van-icon{
  position: absolute;
  top: 50%;
  left: 25%;
  transform: translate(-50%,-50%);
}
.content-btm{
  height: 10vw;
  line-height: 10vw;
  /* background-color: aqua; */
}
.btm-right{
  float: right;
  font-size: 2vw;
}
</style>
